<template>
  <el-form :model="ruleForm"  ref="ruleForm">
        <el-form-item>
            <div class="form-inline-input">
            <div class="code-box" id="code-box">
                <input type="text" name="code" class="code-input" />
                <p></p>
                <span :class="{'handler_ok_bg':!ruleForm.verification}" class="handler handler_bg"></span>
            </div>
        </div>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
    name:"verificationCode",
    data(){
        return {
            ruleForm:{
                verification:true,
            },
        }
    },
    mounted(){
        let _this  = this;
        let code   = "",
        codeFn = new _this.moveCode(code,_this);
    },
    methods:{
        getOffset(box,direction){
            var setDirection = (direction == 'top') ? 'offsetTop' : 'offsetLeft' ;
            var offset       = box[setDirection];
            var parentBox    = box.offsetParent;
            while(parentBox){
                offset+=    parentBox[setDirection];
                parentBox = parentBox.offsetParent;
            }
            parentBox = null;
            return parseInt(offset);
        },
        /*
         *@Description : code 服务器返回的验证码
         *@MethodAuthor: Answer空白
         *@Date: 2020-08-21 17:12:16
        */
        moveCode(code,_this){
            let box            = document.querySelector("#code-box"),
                progress       = box.querySelector("p"),
                codeInput      = box.querySelector('.code-input'),
                evenBox        = box.querySelector("span");
            //默认事件
            let boxEven = ['mousedown','mousemove','mouseup'];
            //改变手机端与pc事件类型
            if(typeof document.ontouchstart == 'object'){
                boxEven = ['touchstart','touchmove','touchend'];
            }
            let goX,offsetLeft,deviation,evenWidth,endX;
          
            function moveFn(e){
                e    = (boxEven['0'] == 'touchstart') ? e.touches[0] : e || window.event;
                endX = e.clientX - goX;
                endX = (endX > 0) ? (endX > evenWidth) ? evenWidth : endX : 0;
                if(_this.ruleForm.verification){
                if(endX > evenWidth * 0.7){
                    progress.innerText             = '松开验证';
                    progress.style.backgroundColor = "#66CC66";
                }else{
                    progress.innerText             = '拖动滑块验证';
                    progress.style.backgroundColor = "#FFFF99";
                }
                progress.style.width = endX + deviation+'px';
                evenBox.style.left   = endX + 'px';
                 }
            }
            function removeFn() {
                document.removeEventListener(boxEven['2'],removeFn,false);
                document.removeEventListener(boxEven['1'],moveFn,false);
                if(endX > evenWidth * 0.7 && _this.ruleForm.verification){
                    progress.innerText          = '验证成功';
                    progress.style.width        = evenWidth+deviation+'px';
                    evenBox.style.left          = evenWidth+'px'
                    evenBox.onmousedown         = null;
                    _this.ruleForm.verification = false;
                    _this.$emit('isSuccess',true)
                }
            };
            function getOffset(box,direction){
                let setDirection = (direction == 'top') ? 'offsetTop' : 'offsetLeft' ;
                let offset       = box[setDirection];
                let parentBox    = box.offsetParent;
                while(parentBox){
                    offset+=parentBox[setDirection];
                    parentBox = parentBox.offsetParent;
                }
                parentBox = null;
                return parseInt(offset);
            };
            evenBox.addEventListener(boxEven['0'], function(e) {
                e = (boxEven['0'] == 'touchstart') ? e.touches[0] : e || window.event;
                goX = e.clientX, offsetLeft = getOffset(box,'left'),   deviation = this.clientWidth, evenWidth = box.clientWidth - deviation, endX;
                document.addEventListener(boxEven['1'],moveFn,false);
                document.addEventListener(boxEven['2'],removeFn,false);
            },false);
        }
    }
}
</script>
<style lang="scss" scoped>
.form-inline-input input,.code-box{
    width        : 100%;
    height       : 36px;
    color        : #fff;
    text-shadow  : 1px 1px 1px black;
    background   : #efefef;
    border       : 0;
    outline      : none;
}
.code-box{
    position: relative;
}
.code-box p,.code-box span{
    display      : block;
    position     : absolute;
    left         : 0;
    height       : 36px;
    text-align   : center;
    line-height  : 36px;
    border-radius: 4px;
    padding      : 0;
    margin       : 0;
    touch-action : none
}
.code-box span{
    width           : 40px;
    background-color: #fff;
    font-size       : 16px;
    border          : 1px solid #ccc;
    cursor: move;
}
.code-box p{
    width           : 0;
    background-color: #7ac23c;
    overflow        : hidden;
    text-indent     : -20px;
    transition      : background 1s ease-in;
    
}
.code-box .code-input{
    display: none;
}
.code-box .code-input{
    display: none;
}
.handler_bg{
    background: #fff url("") no-repeat center;
}
.handler_ok_bg{
    background: #fff url("") no-repeat center;
}
.drag_bg{
    background-color: #7ac23c;
    height          : 34px;
    width           : 0px;
}
</style>
